<template>
    <view class="my">
        <view class="top-box px-[40rpx]">
            <wxTopStatus :isBack="false"></wxTopStatus>
            <view class="info-box flex-row gap-[20rpx]" @click="loginOrToUser">
                <image mode="aspectFill" :src="getImgUrl(userStore.userInfo.avatar)"></image>

                <view class="info flex-column-between">
                    <view clas="name">{{ showNickname() }}</view>
                    <view class="auth-status"> </view>
                </view>
            </view>
            <view class="vip-box" @click="$jump('/pages/member/member')">
                <!--                <image mode="widthFix" :src="$getImg('/img/icon/my/member.png')"> </image>-->
                <image
                    mode="widthFix"
                    :src="$getImg('/img/icon/my/bigvip.png')"
                    v-if="!userStore.userInfo.memberId"
                >
                </image>
                <image
                    mode="widthFix"
                    :src="$getImg(`/img/icon/my/member${userStore.userInfo.memberId}.png`)"
                    v-else
                >
                </image>
                <!--                <image mode="widthFix" :src="$getImg('/img/icon/my/bigvip.png')"> </image>-->
            </view>
        </view>
        <!--  -->
        <view class="content-box flex-column p-[40rpx] gap-[40rpx]">
            <!--u币中心  &  我的主页-->
            <view class="flex-between gap-[30rpx] UBI-mine">
                <view class="flex-1-0-0 UBI-mine-item flex-row-center p-[20rpx] gap-[10rpx]">
                    <image mode="widthFix" :src="$getImg('/img/icon/my/uBi.png')"></image>

                    <view class="Ubi-center" @click="$jump('/pages/rechargeCenter/rechargeCenter')">
                        <view>U币中心</view>
                        <view class="sub-u">剩余U币 {{ userStore.userInfo.ucoin || 0 }}</view>
                    </view>
                </view>
                <view
                    class="flex-1-0-0 UBI-mine-item flex-row-center p-[20rpx] gap-[10rpx]"
                    @click="toHomePage"
                >
                    <image mode="widthFix" :src="$getImg('/img/icon/my/myHome.png')"></image>

                    我的主页
                </view>
            </view>
            <!--我的关注 & 点赞收藏 &  我的发布 & 在线客服-->
            <view class="flex-row func-box p-[20rpx] gap-[20rpx]">
                <view
                    class="flex-center-column gap-[10rpx]"
                    @click="$jump('/views/subViews/mine/myConcern/index')"
                >
                    <image mode="widthFix" :src="$getImg('/img/icon/my/lovely.png')"></image>

                    我的关注
                </view>
                <view
                    class="flex-center-column gap-[10rpx]"
                    @click="$jump('/views/subViews/mine/favorites/index')"
                >
                    <image mode="widthFix" :src="$getImg('/img/icon/my/like-shapes.png')"></image>

                    点赞收藏
                </view>
                <view
                    class="flex-center-column gap-[10rpx]"
                    @click="$jump('/views/subViews/mine/myRelease/index')"
                >
                    <image mode="widthFix" :src="$getImg('/img/icon/my/menu-board.png')"></image>

                    我的发布
                </view>
                <!--                <button open-type="contact">-->
                <view class="flex-center-column gap-[10rpx]" @click.stop="ServiceChatFn">
                    <image mode="widthFix" :src="$getImg('/img/icon/my/kefu.png')"></image>

                    在线客服
                </view>
                <!--                </button>-->
            </view>

            <!--      我的工具-->

            <view class="tool-box flex-column p-[30rpx]">
                <view class="box-title">我的工具</view>
                <view class="tool-item flex-between py-[20rpx]">
                    <view class="tool-left flex-center">
                        <image
                            mode="widthFix"
                            :src="$getImg('/img/icon/my/shield-tick.png')"
                        ></image>
                        实名认证
                    </view>
                    <view
                        class="tool-right auth-status"
                        @click="() => !userStore.userInfo.isRealNameAuthentication && goAuth()"
                        >{{
                            userStore.userInfo.isRealNameAuthentication ? '已认证' : '未认证'
                        }}</view
                    >
                </view>

                <view
                    class="tool-item flex-between py-[20rpx] gap-[10rpx]"
                    @click="$jump('/views/subViews/mine/setting/index')"
                >
                    <view class="tool-left flex-center">
                        <image mode="widthFix" :src="$getImg('/img/icon/my/setting.png')"></image>

                        设置
                    </view>
                    <view class="tool-right">
                        <image mode="widthFix" :src="$getImg('/img/common/toRight.png')"></image
                    ></view>
                </view>

                <view
                    class="tool-item flex-between py-[20rpx] gap-[10rpx]"
                    @click="jump('/views/subViews/mine/setting/about')"
                >
                    <view class="tool-left flex-center">
                        <image mode="widthFix" :src="$getImg('/img/icon/my/about.png')"></image>
                        关于我们
                    </view>
                    <view class="tool-right"
                        ><image mode="widthFix" :src="$getImg('/img/common/toRight.png')"></image
                    ></view>
                </view>
            </view>
        </view>
    </view>

    <tabbar></tabbar>
</template>
<script lang="ts" setup>
import { getImg, getImgUrl, jump } from '@/utils/util'
import { useUserStore } from '@/stores/user'
import { useLogin } from '@/stores/login'
import { getCustomerServiceAPI } from '@/api/my'
const userStore = useUserStore()
const loginStore = useLogin()

const bg = `url(${getImg('/img/icon/my/myBg.png')})`

const loginOrToUser = () => {
    if (userStore.token) {
        jump('/views/subViews/mine/setting/myInfo')
    } else {
        loginStore.showLogin = true
    }
}

const showNickname = () => {
    console.log('showNickname', userStore.userInfo)
    if (userStore.token) {
        return userStore.userInfo.nickname || '熊猫优客用户'
    }

    return '未登录'
}

const goAuth = () => {
    uni.navigateTo({
        url: '/views/subViews/mine/setting/realName'
    })
}

// 获取客服配置
const WXChartInfo = ref({})
const getWXChatFn = () => {
    getCustomerServiceAPI().then((res) => {
        console.log('getWXChatFn', res)
        if (res.code === 0) {
            WXChartInfo.value = res.data
            console.log()
        }
    })
}

const toHomePage = () => {
    // views/subViews/userHomePage/index/index
    console.log(userStore.userInfo)

    if (userStore.userInfo && userStore.userInfo.userId) {
        uni.navigateTo({
            url: '/views/subViews/userHomePage/index/index?uid=' + userStore.userInfo.userId
        })
    } else {
        loginStore.showLogin = true
    }
}
onLoad(() => {})
const ServiceChatFn = async () => {
    // 微信客服调用

    // 获取企业id信息
    await getWXChatFn()
    console.log('在线客服', WXChartInfo.value.customerServiceUrl)

    wx.openCustomerServiceChat({
        extInfo: { url: WXChartInfo.value.customerServiceUrl },
        corpId: WXChartInfo.value.corpId,
        success(res: any) {
            console.log('微信客服', res)
        },
        fail(res: any) {
            console.log('微信客服112', res)
        }
    })
    // #ifdef mp-weixin

    // #endif
}
</script>

<style lang="scss" scoped>
.my {
    height: 100vh;
    background-color: #f2f3f7;

    .content-box {
        .func-box {
            background-color: #fff;
            box-shadow: 0 3px 5px 0 rgba(27, 53, 155, 0.04);
            border-radius: 16rpx;

            & > view {
                flex: 1 0 0;
                font-size: 10px;
                color: #4c5879;
            }

            image {
                width: 54rpx;
            }
        }

        .tool-box {
            background-color: #fff;
            box-shadow: 0 3px 5px 0 rgba(27, 53, 155, 0.04);
            border-radius: 16rpx;

            .tool-item {
                .tool-left {
                    gap: 20rpx;
                    image {
                        width: 44rpx;
                    }
                }

                .tool-right {
                    image {
                        width: 14rpx;
                    }
                }
                .auth-status {
                    color: #999;
                    font-size: 13px;
                }
            }
        }

        .UBI-mine {
            .UBI-mine-item {
                color: #4c5879;
                font-size: 14px;
                .sub-u {
                    font-size: 11px;
                    color: #8c99bc;
                }
                image {
                    width: 64rpx;
                }

                border-radius: 16rpx;
                height: 132rpx;
                box-shadow: 0 3px 5px 0 rgba(27, 53, 155, 0.04);
                background-color: #fff;
            }
        }
    }
}

image {
    width: 30rpx;
    height: 30rpx;
}

.top-box {
    background-image: v-bind(bg);
    background-size: 100%;
    background-repeat: no-repeat;

    .vip-box {
        //background: linear-gradient(90deg, #1a26ba 0%, #286bf0 102%);
        width: 100%;
        border-radius: 20rpx 20rpx 0 0;
        box-shadow: inset 0px 1px 0px 0px rgba(204, 255, 254, 0.75);
        image {
            width: 100%;
            margin-bottom: -25rpx;
        }
    }
}

.info-box {
    padding-bottom: 40rpx;
    font-size: 17px;
    font-weight: 700;
    color: #fff;

    image {
        width: 86rpx;
        height: 86rpx;
        border-radius: 999rpx;
    }
}
</style>
